<template>
  <div id="teamPage">
    <!-- 创建队伍按钮 -->
    <van-button style="margin-top: 10px;" type="primary" @click="doCreateTeam">创建队伍</van-button>
    <!-- 队伍卡片页 -->
    <CardTeamList :teamList="teamList" :showAddTeamBtn="true"></CardTeamList>
  </div>
</template>

<script setup lang="ts">
import CardTeamList from "../../components/CardTeamList.vue";
import {onMounted, ref} from "vue";
import request from "../../request/request";
import {showFailToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter();

const teamList = ref([])

// 点击创建队伍按钮触发
const doCreateTeam = () => {
  router.push('/team/create')
}

// 页面第一次加载时触发
onMounted(async () => {
  const res = await request.get("/team/list");
  if (res.data.code === 200 && res.data.data) {
    // 获取数据成功
    teamList.value = res.data.data;
  } else {
    showFailToast('队伍列表加载失败！');
  }
})
</script>

<style scoped>

</style>